<template>
    <div class="myHeader">
        <van-nav-bar :title="title">
            <template #left>
                <slot v-if="back">
                    <div @click="goback" class="left">
                        <van-icon name="arrow-left" size="18" />
                        <span>返回</span>
                    </div>
                </slot>
                <slot v-if="find">
                    <van-icon name="add-o" @click="sendDiary">发布游记</van-icon>
                </slot>
            </template>
            <template #right>
                <slot name="rightBox">
                    <van-popover @select="onSelect" v-model:show="showPopover" :actions="actions" placement="bottom-end">
                        <template #reference>
                            <van-icon name="more-o" size="18" />
                        </template>
                    </van-popover>
                </slot>
            </template>
        </van-nav-bar>
    </div>
</template>

<script setup>
import { useRoute,useRouter } from 'vue-router';
import { useCommon } from '../hooks/common';
import { ref } from "vue"

const { gotoWhere, goback } = useCommon()
const showPopover = ref(false);
const route = useRoute()
const router = useRouter()
const actions = ref([
    { text: '我的', icon: 'friends-o', path: '/mine', disabled: route.path == "/mine" },
    { text: '搜索', icon: 'search', path: '/search', disabled: route.path == '/search' },
    { text: '发现', icon: 'hot-o', path: '/find', disabled: route.path == '/find' },
])


const sendDiary = ()=>{
    router.push('/find/sendDiray')
}
const props = defineProps({
    //接收来自父组件的props
    title: {
        default: "标题",
        type: String
    },
    back: {
        default: false,
        type: Boolean
    },
    find:{
        type:Boolean,
        default:false
    }
})
const onSelect = (action, index) => {
    console.log(action, index);
    console.log(action.path);
    gotoWhere(action.path)
}
</script>

<style lang="scss" scoped></style>